<template>
    <el-dialog :title="title" v-if="open" v-model="open" width="1200px" append-to-body>
        <el-card class="box-card" shadow="always" v-show="showSearch">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                <el-form-item label="客户名称" prop="clientId">
                    <el-select v-model="queryParams.clientId" filterable clearable remote reserve-keyword
                        placeholder="请选择客户" :remote-method="(query) => remoteMethod(query, 'supplier', 'supplierName')"
                        :loading="loading" @change="handleQuery">
                        <el-option v-for="item in supplierOptions" :key="item.id" :label="item.supplierName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker style="width:240px" placeholder="选择方案日期" v-model="dateRange"
                        value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="报价单号" prop="quotationCode">
                    <el-input v-model="queryParams.quotationCode" placeholder="报价单号" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="状态" prop="quotationStatus">
                    <el-select v-model="queryParams.quotationStatus" clearable reserve-keyword placeholder="报价状态"
                        @change="handleQuery">
                        <el-option v-for="item in quote_status" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="报价人" prop="quotationName">
                    <el-input v-model="queryParams.quotationName" placeholder="请输入报价人" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">搜索</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="box-card mt20" shadow="always" :body-style="{ padding: '20px' }">
            <template #header>
                <div>
                    <el-row :gutter="10" class="mb8">

                        <el-button type="primary" @click="handleAdd" v-hasPermi="['plan:order:add']">添加报价单
                        </el-button>
                        <right-toolbar :v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                    </el-row>
                </div>
            </template>
            <!-- card body -->
            <!-- <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary"  icon="el-icon-plus"  @click="handleAdd"
                        v-hasPermi="['plan:order:add']">添加报价单
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger"  icon="el-icon-delete"  :disabled="multiple"
                        @click="handleDelete" v-hasPermi="['plan:order:remove']">删除
                    </el-button>
                </el-col>
                <right-toolbar :v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
            </el-row> -->

            <el-table border v-loading="loading" :data="dataSource" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
                <el-table-column label="#" type="index"> </el-table-column>
                <el-table-column label="报价单号" align="center" prop="quotationCode" width="250" />
                <el-table-column label="日期" align="center" prop="quotationTime" width="220" />
                <el-table-column label="客户名称" align="center" width="180">
                    <template #default="scope">
                        {{ scope.row.jzgSupplierVo && scope.row.jzgSupplierVo.supplierName || '' }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="方案" align="center" prop="warehouseName" /> -->
                <el-table-column label="适用价格" align="center" prop="applyPrice" />
                <el-table-column label="报价状态" align="center" prop="quotationStatus">
                    <template #default="scope">
                        {{ selectDictLabel(quote_status, scope.row.quotationStatus) }}

                    </template>
                </el-table-column>
                <el-table-column label="联系人" align="center" prop="quotationName" />
                <el-table-column label="备注" align="center" prop="remark" />
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page.sync="queryParams.pageNum"
                v-model:limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-card>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import listMixin from '@/mixins/listMixin';
import { getQuotation } from '@/api/goods/quotation';
export default {
    name: "selectMaterialForm",
    mixins: [listMixin],
    data() {
        return {
            open: false,
            title: "选择报价单",
            loading: false,
            goods_source: [],
            drop_shipping: [],
            material_audit_status: [],//商品审核状态
            quote_status: [],
            urls: {
                list: '/order/quotation/list',
                delete: '/order/quotation',
            }
        }
    },

    methods: {
        show() {
            this.open = true;
            this.getDicts(['quote_status']);
            this.getList()
        },
        async submit() {
            if (this.selectedRows.length === 0) {
                this.$modal.msgError('请选择报价单')
                return
            }
            if (this.selectedRows.length > 1) {
                this.$modal.msgError('只能选择一个报价单')
                return
            }
            this.open = false;
            this.$emit('loading', true)
            const res = await getQuotation(this.selectedRows[0].id)
            const data = {
                goodsName: '商品名称',
                goodsSku: 'SKU',
                itemNo: '货号',
                primarilyImg: '商品默认图片',
                packImg: '商品主图',
                auxiliaryImg: '商品副图',
                goodsUnit: '商品单位',
                goodsSize: '商品尺寸',
                costPrice: '成本价',
                wholesalePrice: '批发价',
                upsetPrice: '最低售价',
                retailPrice: '零售价',
                purchasePrice: '一件代发采购价',
                salePrice: '一件代发销售价',
                supplyMode: '供货方式',
            }
            res.data.quotationItemVoList = res.data.quotationItemVoList//.map(v=>(v.jzgGoodsVo = data,v))
            console.log('res.data :>> ', res.data);
            this.$emit('ok', res.data)
        },
        cancel() {
            this.open = false;
        },
    }
}
</script>

<style lang="scss" scoped></style>